1 files changed, 117 insertions, 0 deletions
diff --git a/src/app/movies/[id]/page.jsx b/src/app/movies/[id]/page.jsx
new file mode 100644
index 0000000..1baec1f
--- /dev/null
+++ b/src/app/movies/[id]/page.jsx
@@ -0,0 +1,117 @@
+import styles from "../styles/info.module.css";
+import { getInfoURL } from "../../../../utils/movie_urls";
+import Image from "next/image";
+import { PiThumbsUpFill } from "react-icons/pi";
+import { FaRegCheckCircle } from "react-icons/fa";
+import { RxDividerVertical } from "react-icons/rx";
+import { FaDollarSign } from "react-icons/fa";
+import { FaSackDollar } from "react-icons/fa6";
+import VIDEO_PLAYER from "../components/video_player";
+
+export default async function MOVIE_INFO({ params }) {
+	const id = params.id;
+	const data = await get_movie_info(id);
+
+	return (
+		<main
+			style={{
+				backgroundImage: `url(https://image.tmdb.org/t/p/original${data.backdrop_path})`,
+				backgroundRepeat: "no-repeat",
+				backgroundSize: "cover",
+			}}
+			className={styles.Main}
+		>
+			<section className={styles.MovieInfoSection}>
+				<section className={styles.MovieInfo}>
+					<div className={styles.HeroSection}>
+						<Image
+							src={`https://image.tmdb.org/t/p/original${data.poster_path}`}
+							width={200}
+							height={300}
+							alt="Movie Poster"
+							priority
+						></Image>
+						<div className={styles.HeroTitle}>
+							<h2>{data.title || "Not found"}</h2>
+							<p className={styles.tagline}>
+								<span>{data.tagline || "Not found"}</span>
+							</p>
+							<p className={styles.MovieDescription}>
+								{data.overview || "Not found"}
+							</p>
+						</div>
+					</div>
+					<div className={styles.OtherInfo}>
+						<section className={styles.Ratings}>
+							<span>
+								<PiThumbsUpFill size={16} />
+								<p>{data.vote_average || "Not found"}</p>
+							</span>
+							<span className={styles.divider}>
+								<RxDividerVertical size={22} />
+							</span>
+							<span>
+								<FaRegCheckCircle size={16} />
+								<p>{data.vote_count || "Not found"}</p>
+							</span>
+						</section>
+						<section className={styles.Money}>
+							<span title="revenue">
+								<FaSackDollar />
+								<p>
+									$
+									{data.revenue.toLocaleString() ||
+										"Not found"}
+								</p>
+							</span>
+							<span className={styles.divider}>
+								<RxDividerVertical size={22} />
+							</span>
+							<span title="budget">
+								<FaDollarSign />
+								<p>
+									$
+									{data.budget.toLocaleString() ||
+										"Not found"}
+								</p>
+							</span>
+						</section>
+						<section className={styles.Money}>
+							<span title="Released on">
+								<p>Release Date: {data.release_date}</p>
+							</span>
+						</section>
+						<section className={styles.Genre}>
+							{data.genres.map((item) => (
+								<p key={item.id}>{item.name || "Not found"}</p>
+							))}
+						</section>
+					</div>
+					<section className={styles.VideoPlayer}>
+						<VIDEO_PLAYER id={id} />
+						<p
+							style={{
+								textAlign: "center",
+								margin: 0,
+								fontSize: 14,
+							}}
+						>
+							NOTE: Please wait for some time for the video to
+							load. If it buffers for a long time, then try
+							chanding the server. If the issue persists, please
+							check your internet connection.
+						</p>
+					</section>
+					<br />
+					<br />
+				</section>
+			</section>
+		</main>
+	);
+}
+
+const get_movie_info = async (id) => {
+	const res = await fetch(getInfoURL(id), { next: { revalidate: 21620 } });
+	const data = await res.json();
+	return data;
+};